<template>
  <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑字典' : '新增字典'" width="600px" draggable class="dict-modal">
    <el-form ref="dictFormRef" :model="dictForm" :rules="rules" label-width="68px">
      <el-form-item label="字典名称" prop="dictName">
        <el-input v-model="dictForm.name" placeholder="请输入字典名称" clearable />
      </el-form-item>
      <el-form-item label="字典类型" prop="dictType">
        <el-input v-model="dictForm.type" placeholder="请输入字典类型" clearable />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="dictForm.remark" type="textarea" placeholder="请输入备注" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit"> 确 定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
  import { useDictApi } from '@/api/dict-api.js';

  const dictApi = useDictApi();

  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false,
    },
    dictData: {
      type: Object,
      default: null,
    },
  });

  const emit = defineEmits(['update:modelValue', 'submit']);

  const dictFormRef = ref(null);
  const dialogVisible = computed({
    get: () => props.modelValue,
    set: (val) => emit('update:modelValue', val),
  });

  const isEdit = computed(() => props.dictData !== null);

  const dictForm = ref({
    name: '',
    type: '',
    status: true,
    remark: '',
  });

  const rules = {
    name: [{ required: true, message: '请输入字典名称', trigger: 'blur' }],
    type: [{ required: true, message: '请输入字典类型', trigger: 'blur' }],
  };

  watch(
    () => props.dictData,
    (newVal) => {
      if (newVal) {
        dictForm.value = { ...newVal };
      } else {
        dictForm.value = {
          name: '',
          type: '',
          status: true,
          remark: '',
        };
      }
    },
    { immediate: true }
  );

  const handleSubmit = async () => {
    dictFormRef.value.validate(async (valid) => {
      if (valid) {
        try {
          let res;
          if (isEdit.value) {
            res = await dictApi.updateDict(dictForm.value);
          } else {
            res = await dictApi.addDict(dictForm.value);
          }
          ElMessage.success(res.message);
          emit('success', dictForm.value);
          dialogVisible.value = false;
        } catch (error) {
          ElMessage.error(isEdit.value ? '更新失败' : '新增失败' + ': ' + error.message);
        }
      }
    });
  };
</script>

<style lang="scss" scoped>
  .dict-modal {
    :deep(.el-dialog) {
      border-radius: 12px;
      overflow: hidden;
      max-width: 520px;
      width: 100%;
    }

    :deep(.el-dialog__header) {
      background-color: #f0f4f8;
      padding: 16px 24px;
      border-bottom: 1px solid #e9ecef;
      display: flex;
      align-items: center;

      .el-dialog__title {
        color: #2c3e50;
        font-size: 18px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 10px;

        &::before {
          content: '';
          display: inline-block;
          width: 6px;
          height: 18px;
          background-color: #3498db;
          border-radius: 3px;
        }
      }
    }

    :deep(.el-dialog__body) {
      padding: 24px;
      background-color: #ffffff;
    }

    :deep(.el-form) {
      .el-form-item {
        margin-bottom: 16px;

        .el-form-item__label {
          color: #34495e;
          font-weight: 500;
          padding-right: 16px;
        }

        .el-input,
        .el-textarea {
          .el-input__wrapper {
            background-color: #f9fafb;
            border: 1px solid #e9ecef;
            border-radius: 6px;
            box-shadow: none;
            transition: all 0.2s ease;

            &:hover {
              border-color: #3498db;
            }

            &.is-focus {
              border-color: #3498db;
              box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);
            }
          }
        }
      }
    }

    :deep(.dialog-footer) {
      display: flex;
      justify-content: flex-end;
      padding: 16px 24px;
      background-color: #f0f4f8;
      border-top: 1px solid #e9ecef;

      .el-button {
        padding: 10px 16px;
        border-radius: 6px;
        transition: all 0.2s ease;

        &.el-button--primary {
          background-color: #3498db;
          border-color: #3498db;
          color: #ffffff;

          &:hover {
            background-color: #2980b9;
            border-color: #2980b9;
          }
        }

        &.el-button--default {
          color: #6c757d;
          background-color: #ffffff;
          border-color: #e9ecef;

          &:hover {
            background-color: #f1f3f5;
            border-color: #dee2e6;
          }
        }
      }
    }
  }
</style>
@/api/dict-api